﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>
        <script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="jquery.tabs.pack.js" type="text/javascript"></script>

        <link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <style type="text/css" media="screen, projection">
            /* Not required for Tabs, just to make this demo look better... */

            body {
                font-size: 16px; /* @ EOMB */
            }

            * html body {
                font-size: 100%; /* @ IE */
            }

                body * {
                    font-size: 87.5%;
                    font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
                }

                    body * * {
                        font-size: 100%;
                    }

            h1 {
                margin: 1em 0 1.5em;
                font-size: 18px;
            }

            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }

            p {
                margin: 0;
            }

                pre, pre + p, p + p {
                    margin: 1em 0 0;
                }

            code {
                font-family: "Courier New", Courier, monospace;
            }
        </style>
    </head>
    <body>

        <img src="../../../Images/TopMenu.JPG" />
        <div id="container-5">
            <ul>
                <li><a href="#fragment-13"><span>Food Menu</span></a></li>
                <li><a href="#fragment-14"><span>Administrator</span></a></li>
               
            </ul>
            <div id="fragment-13">
                <p>Mac Meals will be here</p>
                <img src="foodmenu.jpg" />
            </div>
            <div id="fragment-14">
                <img src="foodmenuAdmin.jpg" />
            </div> 
        </div>
        <script type="text/javascript">
            $(function () {
                $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
            });
        </script>
    </body>
</html>